<template>
    <!-- <view class="a-ass-icons" :style="{width:props.size+'rpx',height:props.size+'rpx',background:props.BGcolor}">
        <view  :style="{fontSize:props.size*0.75 +'rpx'}" :class="iconclass[props.type]"></view>
    </view> -->
    <view class="a-ass-icons" :style="{width:props.size+'rpx',height:props.size+'rpx',background:theme.btn_background_color}">
        <!-- <view  :style="{fontSize:props.size*0.75 +'rpx'}" :class="iconclass[props.type]"></view> -->
        <image
        :style="{width:props.size +'rpx',
          height:props.size +'rpx'}"
          :src="cdnUrl(theme[`${type}_image`]||'')"
          mode="scaleToFill"
        />
    </view>
</template>

<script setup>
import {cdnUrl} from '@/association/utils'
import association from '@/association/store'
 const props = defineProps({
    type: {
      type: [Number, String],
      default: '0',
    },
    BGcolor:{
        type: String,
        default: '',
    },
    size:{
        type : [Number, String],
        default:50
    },
  });
  import {
	computed,
	reactive
} from 'vue';
import sheep from '@/sheep';

  const theme =computed(()=>association().theme)

  // const iconclass={
  //   share:'_aicon-fenxiang',//分享
  //   visit:'_aicon-dianpu',//店铺
  //   questions:'_aicon-wenda',//问答
  //   note:'_aicon-riji', //日记
	//   shop:'_aicon-bofang',//播放
  // }
</script>

<style lang="scss" scoped>

// @import '@/association/scss/index.scss';
view{
	box-sizing: border-box;
}
.a-ass-icons{
border-radius: 50%;
background-color: #0AD5EA;
display: flex;
align-items: center;
justify-content: center;
&>view{
    color: #fff;
}
}
</style>
